<script setup lang="ts">
import { computed } from 'vue'
import { ref } from 'vue'
import { COLORLIST, type ColorItem } from '@/shared/colorList'
import draggable from 'vuedraggable'

const emit = defineEmits<{
  'color-change': [value: ColorItem[]]
}>()

const colors = ref<ColorItem[]>(COLORLIST.slice(0, 2))

// 添加颜色
const curIdx = ref(2)
const addColor = () => {
  if (curIdx.value === 5) return
  curIdx.value++
  colors.value.push(COLORLIST[curIdx.value - 1])
  emit('color-change', colors.value)
}

// 删除颜色
const delColor = (id: number) => {
  if (colors.value.length === 2) return
  const idx = colors.value.findIndex(color => color.id === id)
  colors.value.splice(idx, 1)
  curIdx.value--
  emit('color-change', colors.value)
}


// 适配删除按钮颜色 css v-bind实现
const fontColor = computed(() => `${curIdx.value > 2 ? 'red' : ''}`)

// 拖拽函数
const listUpdate = () => {
  emit('color-change', colors.value)
}
</script>

<template>
  <div class="colors-box">
    <h1 class="title">Colors</h1>
    <div class="color-container">
      <draggable v-model="colors" @update="listUpdate" item-key="id">
        <template #item="{ element }">
          <div class="item" @click="delColor(element.id)">
            <button class="btn-box">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" aria-hidden="true" class="svgIcon drag">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M7 11.5V14m0-2.5v-6a1.5 1.5 0 113 0m-3 6a1.5 1.5 0 00-3 0v2a7.5 7.5 0 0015 0v-5a1.5 1.5 0 00-3 0m-6-3V11m0-5.5v-1a1.5 1.5 0 013 0v1m0 0V11m0-5.5a1.5 1.5 0 013 0v3m0 0V11">
                </path>
              </svg>
            </button>
            <button class="color-btn" :style="{
              'background-color': element.value
            }">{{ element.value }}</button>
            <button class="btn-box">
              <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2"
                stroke="currentColor" aria-hidden="true" class="svgIcon del">
                <path stroke-linecap="round" stroke-linejoin="round"
                  d="M19 7l-.867 12.142A2 2 0 0116.138 21H7.862a2 2 0 01-1.995-1.858L5 7m5 4v6m4-6v6m1-10V4a1 1 0 00-1-1h-4a1 1 0 00-1 1v3M4 7h16">
                </path>
              </svg>
            </button>
          </div>
        </template>
      </draggable>
      <button class="new-btn" @click="addColor">
        <svg xmlns="http://www.w3.org/2000/svg" fill="none" viewBox="0 0 24 24" stroke-width="2" stroke="currentColor"
          aria-hidden="true" class="svgIcon new">
          <path stroke-linecap="round" stroke-linejoin="round"
            d="M12 9v3m0 0v3m0-3h3m-3 0H9m12 0a9 9 0 11-18 0 9 9 0 0118 0z"></path>
        </svg>
        <span>NEW COLOR</span>
      </button>
    </div>
  </div>
</template>

<style lang="less" scoped>
.colors-box {
  width: 320px;
  margin-top: 20px;

  button {
    cursor: pointer;
  }

  .title {
    font-size: 20px;
    color: #64748B;
    font-weight: 700;
  }

  .item {
    display: flex;
    align-items: center;
    margin-top: 16px;
  }

  .color-btn {
    height: 50px;
    margin: 0 20px;
    flex: 1;
    background-color: #fff;
    border-radius: 12px;
    border: none;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 20%);
    color: #fff;
    font-size: 14px;
  }

  .btn-box {
    width: 50px;
    height: 50px;
    border-radius: 12px;
    background-color: #fff;
    border: none;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 20%);
  }

  .svgIcon {
    width: 22px;
    height: 22px;
    font-weight: 400;

    &.drag {
      color: #ccc;
    }

    &.del {
      color: v-bind(fontColor)
    }

    &.new {
      margin-right: 4px;
      width: 24px;
      height: 24px;
    }
  }

  .new-btn {
    width: 100%;
    height: 50px;
    display: flex;
    justify-content: center;
    align-items: center;
    margin-top: 20px;
    border-radius: 12px;
    background-color: #fff;
    border: none;
    box-shadow: 0 10px 15px -3px rgb(0 0 0 / 20%);
    color: #3B82F6;
    font-size: 16px;
    font-weight: 700;
  }
}
</style>